<template>
    <div class="Servergroup">
        <el-row>
            <!-- 头部2，创建按钮 及搜索框 -->
            <el-col :span="24">
                <el-card class="Servergroup-head-card" shadow="never" :body-style="{padding:'10px'}">
                    <!-- float属性，会将多个同级标签放在同一行 -->
                    <div style="float: left;margin-right:10px;">
                        <el-button  size="small" type="primary" icon="Edit"  @click="createservergroupDrawer = true">创建</el-button>
                    </div>
                    <div>
                        <el-input class="Servergroup-head-search" size="small" clearable placeholder="请输入" v-model='searchValue'></el-input>
                        <el-button size="small" type="primary" plain icon="Edit" @click="getServergroups()">搜索</el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <div>
                    <el-card class="Servergroup-body-card" shadow="never" :body-style="{padding:'5px'}">
                        <el-table
                        style="width:100%;font-size:12px;margin-bottom:10px;"
                        :data="ServergroupList"
                        v-loading="appLoading">
                            <el-table-column width="20"></el-table-column>
                            <el-table-column align=left label="服务器组">
                                <template v-slot="scope">
                                    <p class="Servergroup-body-Servergroupname">{{ scope.row.group_name }}</p>
                                </template>
                            </el-table-column>
                          <el-table-column align=center min-width="100" label="备注">
                            <template v-slot="scope">
                              <el-tag type="info">{{ scope.row.note }} </el-tag>
                            </template>
                          </el-table-column>
                            <el-table-column align=center label="操作" min-width="120">
                                <template v-slot="scope">
<!--                                    <el-button size="small" style="border-radius:2px;" icon="Edit" type="primary" plain @click="scope,updataserverDrawer = true">更新</el-button>-->
                                    <el-button size="small" style="border-radius:2px;" icon="Edit" type="primary" plain @click="updata_data(scope,updataservergroupFunc)">更新</el-button>
                                    <el-button size="small" icon="Edit" type="danger" plain @click="handleConfirm(scope, '删除', delServergroup)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                        class="Servergroup-body-pagination"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pagesizeList"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :prev-click="getServergroups"
                        :total="ServergroupTotal">
                        </el-pagination>
                    </el-card>
                </div>
            </el-col>
        </el-row>

      <!-- 创建 -->
      <el-drawer
          v-model="createservergroupDrawer"
          direction="rtl"
          :before-close="handleClose"
          title="创建服务器组">
        <template #default>
          <!-- flex布局,居中 -->
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <!-- ref绑定控件后，js中才能用this.$ref获取该控件 -->
              <!-- rules 定义form表单校验规则 -->
              <el-form ref="createservergroupData" :rules="createservergroupRules" :model="createservergroupData" label-width="80px">
                <!-- prop用于rules中的校验规则的key -->
                <el-form-item class="deploy-create-form" label="名称" prop="group_name">
                  <el-input v-model="createservergroupData.group_name"></el-input>
                </el-form-item>
                <el-form-item class="deploy-create-form" label="描述" prop="note">
                  <el-input v-model="createservergroupData.note"></el-input>
                </el-form-item>
<!--本来想用多对多接口-->
<!--                <el-form-item class="deploy-create-form" label="命名空间" prop="namespace">-->
<!--                  <el-select v-model="createservergroupData.servername" filterable placeholder="请选择">-->
<!--                    <el-option-->
<!--                        v-for="(item, index) in serverList"-->
<!--                        :key="index"-->
<!--                        :label="item.hostname"-->
<!--                        :value="item.hostname">-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->

              </el-form>
            </el-col>
          </el-row>
        </template>
        <!-- 插槽，抽屉footer -->
        <template #footer>
          <!-- 点击后赋值false，隐藏抽屉 -->
          <el-button @click="createservergroupDrawer=false">取消</el-button>
          <el-button type="primary" @click="submitForm('createservergroupData')">立即创建</el-button>
        </template>
      </el-drawer>

      <!-- 更新 -->
      <el-drawer
          v-model="updataserverDrawer"
          direction="rtl"
          :before-close="handleClose"
          title="更新服务器组">
        <template #default>
          <!-- flex布局,居中 -->
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <!-- ref绑定控件后，js中才能用this.$ref获取该控件 -->
              <!-- rules 定义form表单校验规则 -->
              <el-form ref="updateServergroupData"  :model="updateServergroupData" label-width="80px">
                <!-- prop用于rules中的校验规则的key -->
                <el-form-item class="deploy-create-form" label="名称" prop="group_name">
                  <el-input v-model="updateServergroupData.params.group_name"></el-input>
                </el-form-item>
                <el-form-item class="deploy-create-form" label="描述" prop="note">
                  <el-input v-model="updateServergroupData.params.note"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </template>
        <!-- 插槽，抽屉footer -->
        <template #footer>
          <!-- 点击后赋值false，隐藏抽屉 -->
          <el-button @click="updataserverDrawer=false">取消</el-button>
          <el-button type="primary" @click="updataservergroupFunc()">更新</el-button>
        </template>
      </el-drawer>



    </div>
</template>

<script>
import common from "../../common/Config";
import httpClient from '@/request';
import yaml2obj from 'js-yaml';
import json2yaml from 'json2yaml';
export default {
    data() {
        return {
            //编辑器配置
            cmOptions: common.cmOptions,
            contentYaml: '',
            //分页
            currentPage: 1,
            pagesize: 10,
            pagesizeList: [10, 20, 30],
            //
            searchValue: '',
            appLoading: false,
            ServergroupList: [],
            ServergroupTotal: 0,
            getServergroupsData: {
                url: common.servergroupList,
                params: {
                    group_name: '',
                    note: '',
                    page: '',
                    limit: '',
                }
            },
          //新增
          createservergroupDrawer: false,
          createservergroupData: {
            url: common.servergroupAdd,
            group_name: '',
            note: '',
            //servername:'',
          },
          //创建servergroup的表单校验规则
          createservergroupRules: {
              group_name: [{
                required: true,
                message: '请填写名称',
                trigger: 'change'
              }],
              note: [{
                required: true,
                message: '请填写描述',
                trigger: 'change'
              }],
          },


          //serverlist
          serverListUrl: common.serverList,
          serverList: [],

            //详情
            ServergroupDetail: {},
            getServergroupDetailData: {
                url: common.servergrouplDetail,
                params: {
                  group_name:'',
                  note:'',
                }
            },
            //更新
            updataserverDrawer: false,
            updateServergroupData: {
                url: common.servergroupUpdate,
                params: {
                  id:'',
                  group_name:'',
                  note:'',
                }
            },
            //删除
            delServergroupData: {
                url: common.servergroupDelete,
                params: {
                  id:'',
                    Servergroup_name: '',
                }
            }
        }
    },
    methods: {
      //创建
      createservergroupFunc() {
        //赋值
        //console.log(this.createservergroupData.group_name)
        httpClient.post(this.createservergroupData.url, this.createservergroupData)
            .then(res => {
              this.$message.success({
                message: res.msg
              })
              //this.resetForm('createservergroupData')
            })
            .catch(res => {
              this.$message.error({
                message: res.msg
              })
            })
            .finally(() => {
              this.getServergroups()
              this.createservergroupDrawer = false
              this.appLoading = false
            })
      },
      //提交表单，验证数据
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.createservergroupFunc()
          } else {
            return false
          }
        })
      },

      //更新
      updata_data(e) {
        this.updataserverDrawer = true
        //赋值
        this.updateServergroupData.params.id= e.row.id
      },
      updataservergroupFunc() {
        //console.log(this.updateServergroupData.params)
        httpClient.put(this.updateServergroupData.url, this.updateServergroupData.params)
            .then(res => {
              this.$message.success({
                message: res.msg
              })
            })
            .catch(res => {
              this.$message.error({
                message: res.msg
              })
            })
            .finally(() => {
              this.getServergroups()
              this.updataserverDrawer = false
              this.appLoading = false
            })
      },

      getServergroups() {
        this.appLoading = true
        this.getServergroupsData.params.group_name = this.searchValue
        this.getServergroupsData.params.page = this.currentPage
        this.getServergroupsData.params.limit = this.pagesize
        console.log(this.getServergroupsData)
        httpClient.get(this.getServergroupsData.url, {params: this.getServergroupsData.params})
            .then(res => {
              this.ServergroupList = res.data
              this.ServergroupTotal = res.data.total
            })
            .catch(res => {
              this.$message.error({
                message: res.msg
              })
            })
        this.appLoading = false
      },

      delServergroup(e) {
        console.log(e.row.id)
        this.delServergroupData.params.id = e.row.id
        httpClient.delete(this.delServergroupData.url, {data: this.delServergroupData.params})
            .then(res => {
              this.getServergroups()
              this.$message.success({
                message: res.msg
              })
            })
            .catch(res => {
              this.$message.error({
                message: res.msg
              })
            })
      },

        //分页属性
        handleSizeChange(size) {
            this.pagesize = size;
            this.getServergroups()
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getServergroups()
        },
        //选择判断
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(() => {
                done();
            })
            .catch(() => {});
        },



      //读取server列表
      // getServers() {
      //   httpClient.get(this.serverListUrl)
      //       .then(res => {
      //         this.serverList = res.data
      //         console.log(this.serverList)
      //       })
      //       .catch(res => {
      //         this.$message.error({
      //           message: res.msg
      //         })
      //       })
      // },

        handleConfirm(obj, operateName, fn) {
            this.confirmContent = '确认继续 ' + operateName + ' 操作吗？'
            this.$confirm(this.confirmContent,'提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            })
            .then(() => {
                fn(obj)
                })
            .catch(() => {
                this.$message.info({
                    message: '已取消操作'
                })
            })
        },
    },


   // beforeMount() {
      mounted() {
        this.getServergroups()
    }
}
</script>


<style scoped>
    .Servergroup-head-card,.Servergroup-body-card {
        border-radius: 1px;
        margin-bottom: 5px;
    }
    .Servergroup-head-search {
        width:160px;
        margin-right:10px; 
    }
    .Servergroup-body-Servergroupname {
        margin: 0px;
        color: #4795EE;
    }
    .Servergroup-body-ip {
        margin: 0px;
        color: rgb(145, 145, 145);
    }
    .Servergroup-body-Servergroupname:hover {
        color: rgb(84, 138, 238);
        cursor: pointer;
        font-weight: bold;
    }
</style>